<template>
  <draggable
    :list="list"
    class="ant-list-items ant-list-bordered"
    ghost-class="ghost"
    handle=".handle"
    item-key="id"
  >
  <template #item="{element}">
    <li
      :class="{
        active: element.id === selectedId,
      }"
      @click="handleClick(element.id)"
      class="ant-list-item"
    >
      <a-tooltip :title="element.isHidden ? '显示' : '隐藏'">
        <a-button
          shape="circle"
          @click="handleChange(element.id, 'isHidden', !element.isHidden)"
        >
          <template v-if="element.isHidden">
            <EyeOutlined />
          </template>
          <template v-else>
            <EyeInvisibleOutlined />
          </template>
        </a-button>
      </a-tooltip>
      <a-tooltip :title="element.isLock ? '解锁' : '锁定'">
        <a-button
          shape="circle"
          @click="handleChange(element.id, 'isLock', !element.isLock)"
        >
          <template v-if="element.isLock">
            <UnlockOutlined />
          </template>
          <template v-else>
            <LockOutlined />
          </template>
        </a-button>
      </a-tooltip>
      <!-- <span>{{ element.layerName }}</span> -->
      <inline-edit
      class="edit-area"
        :value="element.layerName"
        @change="(value: string) => handleChange(element.id, 'layerName', value)"
      >
      </inline-edit>
      <a-tooltip title="拖动排序">
        <a-button shape="circle" class="handle">
          <template v-slot:icon ><DragOutlined/></template>
        </a-button>
      </a-tooltip>
    </li>
  </template>
  </draggable>
</template>
<script lang="ts" setup>
import { ComponentData } from "@/store/editor";
import { defineEmits, computed, defineProps, ref, watch, reactive } from "vue";
import InlineEdit from "./InlineEdit.vue";
import { getParentElement } from "@/helper";
import { arrayMoveMutable } from "array-move";
import {
  EyeOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  UnlockOutlined,
  DragOutlined,
} from "@ant-design/icons-vue";
import draggable from "vuedraggable";
import { Tooltip as aTooltip, Button as aButton } from "ant-design-vue";

const props = defineProps<{
  list: ComponentData[];
  selectedId: string | undefined;
}>();

const emit = defineEmits(["select", "change","drop"]);

const dragData = reactive<{
  currentDragging: string;
  currentIndex: number;
}>({
  currentDragging: "",
  currentIndex: -1,
});

let start = -1;
let end = -1;

const onDragStart = (e: DragEvent, id: string, index: number) => {
  dragData.currentDragging = id;
  dragData.currentIndex = index;
  start = index;
};

const onDrop = (e: DragEvent) => {
  // const currentElement = getParentElement(
  //   e.target as HTMLElement,
  //   "ant-list-item"
  // );
  // // const currentElement = e.target as HTMLElement;
  // console.log("onDrop", currentElement);
  // if (currentElement && currentElement.dataset.index) {
  //   const moveIndex = parseInt(currentElement.dataset.index);
  //   console.log(moveIndex);
  //   arrayMoveMutable(props.list, dragData.currentIndex, moveIndex);
  // }

  emit("drop", {start, end})
  dragData.currentDragging = "";
};

const onDragOver = (e: DragEvent) => {
  e.preventDefault();
};

const onDragEnter = (e: DragEvent, index: number) => {
  if (index !== dragData.currentIndex) {
    arrayMoveMutable(props.list, dragData.currentIndex, index);
    dragData.currentIndex = index;
    end = index;
  }
};

const handleChange = (id: string, key: string, value: boolean | string) => {
  const data = {
    id,
    key,
    value,
    isRoot: true,
  };
  emit("change", data);
};

const handleClick = (id: string) => {
  emit("select", id);
};
</script>
<style scoped lang="less">
.ant-list-bordered {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ant-list-items {
  .ant-list-item.active {
    border: 1px solid #1890ff;
  }
  .ant-list-item:hover {
    background: #e6f7ff;
  }
  .ant-list-item {
    padding: 10px 15px;
    transition: all 0.5s ease-out;
    display: flex;
    cursor: pointer;
    justify-content: normal;
    align-items: center;
    border: 1px solid#fff;
    border-bottom-color: #f0f0f0;
    button {
      margin-right: 15px;
      font-size: 12px;
    }
    &.ghost {
      opacity: 0.5;
    }
    .handle {
      cursor: move;
      margin-left: auto;
    }
    .edit-area{
      width: 100%;
    }
  }
}
</style>
